<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'切换'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "0">
        <div class="analyItem" v-for="index in 1" :key="index">
            <p class="analyItemTit tx-center">切换</p>
            <div class="analyItemCon">
                <div class="components-switch">
                    <div v-show="switchIndex == index">
                        <span class="switch-save" @click="switchChange(null, 'save')">保存</span>
                        <span class="switch-back" @click="switchChange(null, 'back')">返回</span>
                    </div>
                    <div v-show="switchIndex != index">
                        <span class="switch-add" @click="switchChange(index, 'add')">添加</span>
                        <span class="switch-delete" @click="switchChange(index, 'delete')">删除</span>
                        <span class="switch-edit" @click="switchChange(index, 'edit')">编辑</span>
                    </div>
                </div>
            </div>
        </div>
        <codemd url="Lesson6/docs/switch.md"></codemd>
    </div>
</div>
</template>
<script>
import codemd from '../code-md'
export default {
    components: {
        codemd
    },
    data () {
        return {
            switchIndex: null
        }
    },
    created () {

    },
    methods: {
        switchChange (index, type) {
            this.switchIndex = index
            if (type === 'save') {
                // ... do something
            }
        }
    }
}
</script>
